body {
    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 100vh;
    background-image: linear-gradient(#111, #050505);
}

.headshot {
    flex-shrink: 0;
    margin: 20px;
    height: calc(150px + 6vw);
    width: calc(150px + 6vw);
    border: calc(8px + 0.2vw) solid transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: cover;
    box-sizing: border-box;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}

.headshot-1 {
    border-radius: 30%;
    background-image: url('../images/dd98045b-f687-4408-90b3-0f9b40fa8e96.jpg'),
    linear-gradient(to top, #0fd850, #f9f047);
}

.headshot-2 {
    border-radius: 50%;
    background-image: url('../images/dd98045b-f687-4408-90b3-0f9b40fa8e96.jpg'),
    linear-gradient(to bottom right, #FF3CAC, #562B7C, #2B86C5);
}

.headshot-3 {
    border-radius: 50% 10%;
    background-image: url('../images/dd98045b-f687-4408-90b3-0f9b40fa8e96.jpg'),
    linear-gradient(to bottom left, #f83600, #f9d423);
}